<template>
  <Teleport to="body">
    <Animation enter-active-class="animate__slideInUp" leave-active-class="animate__slideOutDown">
      <a-card
        :bordered="false"
        :bodyStyle="{ padding: '0', height: '100%' }"
        class="system-starter"
        v-if="showStarter"
        ref="menuRef"
      >
        <div class="flex h-[100%]">
          <MenuSidebar />
          <MenuBody />
        </div>
      </a-card>
    </Animation>
  </Teleport>
</template>

<script setup lang="ts">
import { onClickOutside } from '@vueuse/core';
import MenuBody from './body/MenuBody.vue';
import { showStarter } from './data';
import MenuSidebar from './sidebar/MenuSidebar.vue';

const menuRef = ref();

nextTick(() => {
  onClickOutside(menuRef, () => {
    showStarter.value = false;
  });
});
</script>

<style lang="scss" scoped>
.system-starter {
  position: absolute;
  background: transparent !important;
  bottom: 40px;
  height: 450px;
  left: 0;
  width: 350px;
  backdrop-filter: blur(4px);
  overflow: hidden;
  z-index: 100;
  :deep(.ant-card) {
    border: none;
    background-color: var(--underpainting);
  }
}
:deep(.ant-card) {
  border-radius: 0;
}
</style>
